<template>
  <div class="dashboard">
    <!-- 顶部关键指标卡片 -->
    <div class="stats-cards">
      <el-card class="card" v-for="card in statsCards" :key="card.title">
        <div class="stat-title">{{ card.title }}</div>
        <div class="stat-value">{{ card.value }}</div>
      </el-card>
    </div>

    <!-- 图表区域 -->
    <div class="charts">
      <!-- 折线图：每日营业额 -->
      <el-card class="chart-card">
        <v-chart class="chart" :option="lineChartOption" autoresize />
      </el-card>

      <!-- 柱状图：门店收入 -->
      <el-card class="chart-card">
        <v-chart class="chart" :option="barChartOption" autoresize />
      </el-card>
    </div>

    <!-- 下方：饼图 + 热销商品表 -->
    <div class="charts">
      <el-card class="chart-card">
        <v-chart class="chart" :option="pieChartOption" autoresize />
      </el-card>
      <el-card class="chart-card">
        <el-table :data="topProducts" border stripe :height="220">
          <el-table-column prop="name" label="商品名称" />
          <el-table-column prop="sales" label="销量" />
          <el-table-column prop="revenue" label="销售额" />
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const statsCards = ref([
  { title: '今日营业额', value: '￥12,350' },
  { title: '今日订单量', value: '238' },
  { title: '客单价', value: '￥51.9' },
  { title: '新增用户', value: '37' }
])

const lineChartOption = ref({})
const barChartOption = ref({})
const pieChartOption = ref({})

const topProducts = ref([
  { name: '男士衬衫', sales: 120, revenue: '￥3600' },
  { name: '女士连衣裙', sales: 95, revenue: '￥4750' },
  { name: '牛仔裤', sales: 80, revenue: '￥4000' },
  { name: '运动鞋', sales: 60, revenue: '￥5400' }
])

const fetchDashboardData = async () => {
  try {
    const dailyRevenue = [1200, 1800, 1600, 2000, 2500, 2200, 2800]
    const storeNames = ['旗舰店', '分店A', '分店B', '分店C']
    const storeRevenue = [12000, 9500, 8800, 7600]
    const categoryData = [
      { value: 1048, name: '上衣' },
      { value: 735, name: '裤装' },
      { value: 580, name: '外套' },
      { value: 484, name: '鞋子' }
    ]

    lineChartOption.value = {
      title: { text: '每日营业额趋势', left: 'center', textStyle: { fontSize: 14 } },
      tooltip: { trigger: 'axis' },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisLabel: { fontSize: 12 }
      },
      yAxis: { type: 'value', axisLabel: { fontSize: 12 } },
      series: [{ data: dailyRevenue, type: 'line', smooth: true, areaStyle: {} }]
    }

    barChartOption.value = {
      title: { text: '门店收入对比', left: 'center', textStyle: { fontSize: 14 } },
      tooltip: {},
      xAxis: { type: 'category', data: storeNames, axisLabel: { fontSize: 12 } },
      yAxis: { type: 'value', axisLabel: { fontSize: 12 } },
      series: [{ data: storeRevenue, type: 'bar', itemStyle: { color: '#409EFF' } }]
    }

    pieChartOption.value = {
      title: { text: '商品分类销售占比', left: 'center', textStyle: { fontSize: 14 } },
      tooltip: { trigger: 'item' },
      legend: { orient: 'vertical', left: 'left', textStyle: { fontSize: 12 } },
      series: [
        {
          type: 'pie',
          radius: '50%',
          data: categoryData,
          emphasis: {
            itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0,0,0,0.5)' }
          }
        }
      ]
    }
  } catch (err) {
    ElMessage.error('获取仪表盘数据失败, err: ' + err)
  }
}

onMounted(() => {
  fetchDashboardData()
})
</script>

<style scoped>
.dashboard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}

/* 顶部卡片 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}
.card {
  text-align: center;
  padding: 8px;
}
.stat-title {
  font-size: 12px;
  color: #666;
}
.stat-value {
  font-size: 18px;
  font-weight: bold;
  margin-top: 4px;
}

/* 图表区域 */
.charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}
.chart-card {
  padding: 6px;
}
.chart {
  width: 100%;
  height: 220px; /* 缩小高度，防止页面滑动 */
}
</style>
